<template>
   <div class="app-container">
  <div class="statdeta">   
    <div class="statfrom">
        
      <el-form :inline="true" :model="formDate" class="demo-form-inline" >
        <el-form-item label="县/区">
            <area-item @getMessage="showMsg"/>
        </el-form-item>

        <el-form-item label="校群">
          <el-input v-model="formDate.groupName" placeholder="校群" style="width:140px" size="small"></el-input>
        </el-form-item>
        <el-form-item label="学校">
          <el-input v-model="formDate.schName" placeholder="学校" style="width:140px" size="small"></el-input>
        </el-form-item> 
        <el-form-item label="老师">
          <el-input v-model="formDate.userName" placeholder="老师" style="width:140px" size="small"></el-input>
        </el-form-item> 
        <el-form-item label="开始时间">
            <el-date-picker v-model="formDate.startDate" type="date" :picker-options="pickerStartDate" placeholder="选择开始日期" style="width:140px"  size="small" @change="getStartime">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
            <el-date-picker v-model="formDate.overDate" type="date" :picker-options="pickerStartDate" placeholder="选择结束日期" style="width:140px" size="small" @change="getStartime">
            </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search"  size="small" @click="toQuery">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="stattab">           
      <div class="tabs">        
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="区县统计" name="qxtab" >
            <qxtable :lists="lists"></qxtable>
          </el-tab-pane>
          <el-tab-pane label="校群统计" name="xqtab" >
            <xqtable :lists="lists"></xqtable>
          </el-tab-pane>
          <el-tab-pane label="学校统计" name="xxtab" >
            <xxtable :lists="lists"></xxtable>
          </el-tab-pane>
          <el-tab-pane label="教师统计" name="jstab" >
            <jstable :lists="lists"></jstable>
          </el-tab-pane>
        </el-tabs>
        <el-button type="primary" class="tabbut" icon="el-icon-download" @click="exportToExcel" size="small">导出</el-button>       
        <div class="tabitem">
          <p>主讲共:<span>{{ jieNums.hostCountNum }}</span>节<span>{{ jieNums.hostCountDuration }}</span>h(小时)</p>
          <p>听讲共:<span>{{ jieNums.hearCountNum }}</span>节<span>{{ jieNums.hearCountDuration }}</span>h(小时)</p>
        </div> 
      </div>      
    </div>
    <!--工具条-->
    <el-col :span="24" class="toolbar">       
       <el-pagination background   @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page.sync="formDate.pageNo" 
       :page-count="pageCount" :page-sizes="[10, 20, 30, 50,100]"  layout="total, sizes,prev, pager, next, jumper" 
       :pager-count="pagerCount" :total="total"  class="pagination">
       </el-pagination>
    </el-col>    
  </div>
  </div>
</template>
<script>
import areaItem from '@/components/area/areaitem'
import qxtable from '../statdeta/tableinfo/qxtab'
import xqtable from '../statdeta/tableinfo/xqtab'
import xxtable from '../statdeta/tableinfo/xxtab'
import jstable from '../statdeta/tableinfo/jstab'

import { getRegion } from '@/api/data'  
import { gettabListpage } from '@/api/echarts'

export default {
  data() {
    return {
      options:[], //区县列表          
      cityCode:'',//区县code
      jieNums:{},
      activeName: 'qxtab',
      // hostNum:'',
      lists:[],     
      pageCount: 0,
      total:0,  //总数
      listLoading: false,     
      pagerCount:11,   //页码按钮的数量，当总页数超过该值时会折叠,大于等于 5 且小于等于 21 的奇数
      formDate:{
        pageNo: 1,  
        pageSize:10,        
        areaCode: "",
        groupId: "",
        groupType: "1",
        startDate: "",
        overDate: "",        
        schName: "",        
        userId: "",
        userName: ""        
      },
      pickerStartDate: {
        disabledDate: time => {
          if (this.formDate.overDate) {
            return (
              time.getTime() > new Date(this.formDate.overDate).getTime()
            )
          } else {
            // 不能大于当前日期
              return time.getTime() > Date.now()
          }
        }
      },
      
    }
  },
  mounted () {
    this.getArea(); 
  },
  created() {
    this.$nextTick(() => {
      let numts = 1
      this.gettablist(numts)
    })
  },
  methods: { 
    getStartime(){
        let sta = this.formDate.startDate,
            end = this.formDate.overDate;
        if (sta  >= end ) {
            return this.formDate.overDate  = ''
        }
       
    },
    showMsg(tir){
            this.formDate.areaCode = tir;
            this.gettablist()
    },   
    handleClick(tab, event) {
      this.groupType = parseInt(tab.index) + 1;
      var numts = parseInt(tab.index) + 1;
      this.gettablist(numts)
    },    
    handleCurrentChange(val) {
        this.pageNo = val;
        this.gettablist()
    },
    handleSizeChange(val) {
        this.pageSize = val
        this.gettablist()
    },
    toQuery(){     
      this.gettablist()
    },
    gettablist(numts){
      // let params = {
      //     startDate:this.formDate.startDate,
      //     overDate:this.formDate.overDate,
      //     groupType:(Number(numts)) + 1,
      //     pageNo:this.formDate.pageNo,
      //     pageSize:this.formDate.pageSize
      // }
      let params = { 
          pageNo: this.formDate.pageNo,  
          pageSize:this.formDate.pageSize,
          groupType:numts,         
          areaCode: this.formDate.areaCode,
          groupId:this.formDate.groupId,          
          userId:this.formDate.userId,        
          startDate:this.formDate.startDate,
          overDate:this.formDate.overDate,
          userName:this.formDate.userName,
          schName:this.formDate.schName
      }
      // let params = { ...this.formDate } 
      // console.log(params)  
      gettabListpage(params).then(res => {
          // console.log(res.data)         
          let { list, total } = res.data
          this.lists = list          
          this.total = total
          let jieNum = res.data.special
          this.jieNums = jieNum          
      })
    },

    // 导出表格    
    exportToExcel() {      
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['区县', '校群名称', '学校名称', '老师名称','课内主讲节数', '课外主讲节数', '主讲总节数','主讲在线时间长(h)','课内听讲节数','课外听讲节数','听讲总节数','听讲在线时长(h)'];
        const filterVal = ['areaName', 'groupName', 'schName', 'userName','innerHostNum', 'outerHostNum', 'hostNum', 'hostAllNum','innerHearNum','outerHearNum','hearNum','hearAllNum'];
        const data = this.formatJson(filterVal, this.lists)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          autoWidth: true,
          filename: '列表excel'
        })    
      }).catch((error) =>{
          console.log(error) //请求失败返回的数据
      })
    },
    formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
    },
    getArea (cityCode) { 
      let  ciyCode = '022002'
      getRegion( ciyCode ).then((res) => {         
        this.options = res.data                   
      })
    }   
  },
  components:{
    qxtable,
    xqtable,
    xxtable,
    jstable,
    areaItem
  }
}
</script>

<style scoped lang="scss">
  .statdeta {
    padding:10px 15px;  
    .stattitle{ 
      h1{
        width:100%;
        height:30px;
        margin-bottom:25px;
        font-size:20px; 
        font-weight: 100;
        border-bottom:1px solid #ccc; 
      }
    }
    .statfrom { 
      margin:25px 0;
    }
    .stattab {
      .tabs{
        position: relative;        
        .tabbut{
          position: absolute;
          top:-5px;
          right:10px;  
        }
        .tabitem{
          position: absolute;
          top:10px;
          right:100px;
          p{            
            display: inline-block;
            margin:0 10px;
            color:#999;
            span{
              margin:0 10px;
              display:inline-block;
              color: chocolate;
            }
          }
        }
      }    
    }
  }
</style>